<template>
  <article>
    <div class="login-animate">
      <span class="circle"></span>
    </div>
    <div class="login-container">
      <input type="text"/>
      <input type="password"/>
      <button>login in</button>
    </div>
  </article>
</template>
<style lang="less" scoped>
  .login-animate {
    width: 100%;
    height: 100%;
    background: #414859;
    position: absolute;
    top:0;
    bottom: 0;
    left:0;
    right:0;
    z-index: 10;
    .circle{
      width: 10px;
      height: 10px;
      position: fixed;
      /*top:50%;*/
      /*left: 50%;*/
      border-radius: 50%;
      background: #f2ab13;
      animation:myfirst 2s 1;
      -webkit-animation:myfirst 2s 1; /* Safari and Chrome */
    }
    @keyframes myfirst
    {
      from {
        width: 10px;
        height: 10px;
        border-radius: 50%;
      }
      to {
        width: 100%;
        height: 100%;
        border-radius: 50%;
        display: none;
      }
    }

    @-webkit-keyframes myfirst /* Safari and Chrome */
    {
      from {
        width: 10px;
        height: 10px;
        border-radius: 50%;
      }
      to {
        width: 100%;
        height: 100%;
        border-radius: 50%;
        display: none;
      }
    }
  }
  .login-container {
    width: 100%;
    height:100%;
    color: #f2ab13;
  }
</style>
